<%--一起听的界面--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="java.io.File" %>
<%@ page import="java.util.ArrayList, java.util.List" %>
<!DOCTYPE html>
<html>
<head>
    <title>一起听</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="<%= request.getContextPath() %>/js/player.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
    const contextPath = '<%= request.getContextPath() %>';
</script>
<div class="player-container">
    <h1>音乐播放器</h1>
    <audio id="audioPlayer" controls></audio>
    <div id="songTitle">请选择一首歌曲</div>

    <h3>播放列表</h3>
    <ul id="playlist">
        <!-- 将歌曲列表动态添加到这里 -->
        <%
            // 动态生成歌曲列表
            String musicDirPath = request.getSession().getServletContext().getRealPath("/Music");
            File musicDir = new File(musicDirPath);
            File[] musicFiles = musicDir.listFiles((dir, name) -> name.endsWith(".mp3"));

            if (musicFiles != null) {
                for (File musicFile : musicFiles) {
                    String fileName = musicFile.getName();
        %>
        <li onclick="playSong('<%= fileName %>')"><%= fileName %></li>
        <%
                }
            } else {
                System.out.println("<li>音乐文件夹为空或路径错误。</li>");
            }
        %>
    </ul>

    <!-- 文件上传表单 -->
    <h3>上传新的 MP3 文件</h3>
    <form action="UploadServlet" method="post" enctype="multipart/form-data">
        <input type="file" name="file" accept=".mp3" required>
        <button type="submit">上传</button>
    </form>
</div>
</body>
</html>
